import React, { useEffect } from 'react';
import { NavLink } from 'react-router-dom';
import Search from '../Search';
import Avatar from '../Avatar';
import './index.less';
import { randomString } from '../../utils';
import { useAppSelector } from '../../redux/hook';

export default function Nav() {
    const [navMap, setNavMap] = React.useState<Record<string, string>>({
        '/home/attention': '网上评教系统',
        '/course': '所有课程',
        '/teacher': '所有老师',
    });

    // 从redux中获取token
    const token = useAppSelector((state) => state.login.token);

    useEffect(() => {
        // 有token才会有我要评教页面
        if (token) {
            setNavMap({
                ...navMap,
                '/evaluate': '我要评教',
            });
        }
    }, [token]);

    return (
        <div className="top-nav-fixed">
            <nav className="top-nav">
                <div className="left-subnav">
                    <ul>
                        {Object.keys(navMap).map((key) => (
                            <li key={key}>
                                <NavLink to={key}>{navMap[key]}</NavLink>
                            </li>
                        ))}
                    </ul>
                </div>
                <div className="right-tools">
                    {/* 搜索框 */}
                    <Search
                        placeholder="search"
                        onChange={(event, showData, setShowData) => {
                            if (!event.target.value.trim()) {
                                setShowData([]);
                                return;
                            }
                            setShowData([
                                {
                                    id: randomString(10),
                                    content: randomString(10),
                                },
                                {
                                    id: randomString(10),
                                    content: randomString(10),
                                },
                                {
                                    id: randomString(10),
                                    content: randomString(10),
                                },
                            ]);
                        }}
                    />
                    {/* 头像 */}
                    <Avatar width="36" />
                </div>
            </nav>
        </div>
    );
}
